<script setup lang="ts">
import { computed, ref, onMounted } from 'vue'

import Tabs from '@/components/Tabs.vue'

import modules, { type modelType } from '@/utils/com_module'
import Todo from '@/components/Todo.vue'
import MyComponent from '@/components/default.vue'
const idx = ref(0)
const changeTab = (index: number) => {
  idx.value = index
}

const itemList: modelType[] = modules

const item = computed(() => {
  return itemList[idx.value]
})
</script>
<template>
  <Tabs :items="itemList" @change="changeTab">
    <div class="h-full box-border">
      <KeepAlive>
        <component
          :is="item.com || MyComponent"
          v-bind="item.props"
          :key="idx"
          @[item?.method1?.name]="item?.method1?.event"
          @[item?.method2?.name]="item?.method2?.event"
          @[item?.method3?.name]="item?.method3?.event"
        ></component>
      </KeepAlive>
    </div>
  </Tabs>
</template>
